<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script type="text/javascript">
        // form提交前，验证
        function check() {
            if (true) {
                return false;
            } else {
                return true; //不写此返回值也行，此时就直接提交了
            }
        }
    </script>
    <script type="text/javascript" src="http://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
    <script type="text/javascript" src="http://static.runoob.com/assets/qrcode/qrcode.min.js"></script>
    <style>
        .summary {
            position: relative;
            overflow: hidden;
            margin-bottom: 5px;
            line-height: 22px;
            word-break: break-all;
            /* text-indent: 5em; */
        }

        .packup p {
            height: 90px;
        }

        .packup:before {
            display: block;
            content: attr(data-content);
            position: absolute;
            z-index: 1;
            left: 0;
            top: 0;
            height: 66px;
            width: 100%;
            overflow: hidden;
            color: #000;
            background-color: #fff;
            /* text-indent: 5em; */
        }

        .packup:after {
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
            -webkit-line-clamp: 4;
            content: attr(data-content);
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            text-indent: -4em;
            padding-right: 3em;
            color: #000;
            background-color: #fff;
        }
    </style>
</head>

<body>
    <h5>数字进行三位逗号处理</h5>
    <hr>
    <h5>将string返解析成对象类型</h5>
    <hr>
    <h5>获取当前移动位置</h5>
    <bottom id="btn1">点击</bottom>
    <hr>
    <h5>拦截form表单提交</h5>
    <!-- 阻止form表单默认提交事件的两种方式
        1、利用form中的onSubmit事件返回 return false，以及return true，来控制提交
        2、利用submit按钮的阻止默认事件的方式(event.preventDefault || return false )
        * 第一中方式需要将方法写在head中
    -->
    <form action="/users/updateBankPhone" method="post" target="_blank" class="form_unwrap_bank_card">
        <input type="hidden" name="id" ng-value="item.id">
        <input id="submit" type="submit" class="btn_unwrap_bank_card" value="form表单提交校验">
        <!-- <input type="submit"  value="提交"   onclick="return check(this.from)"> -->
    </form>
    <hr>
    <h5>获取理论唯一值</h5>
    <bottom id="btn2">点击获取唯一值</bottom>
    <hr>
    <h5>qrcode-Js版本使用</h5>
    <input id="text" type="text" value="https://image.baidu.com/" style="width:80%" />
    <br/>
    <div id="qrcode" style="width:100px; height:100px; margin-top:15px;"></div>
    <hr>
    <h5>fileReader头像上传新方法</h5>
    <input value="上传图片" type="file" id="file" name="file" onchange="show(this.files)" />
    <img height="50" width="50" id="img" />
    <hr>
    <h5>css实现展开更多文字功能</h5>
    <div class="summary packup" data-content="这个效果并不是很好，这样会导致最后一行的文字和倒数第二行的文字断章取义，有一点伪元素中content='attr(data-content)'可以动态获取父级的属性内容说----这个效果并不是很好，这样会导致最后一行的文字和倒数第二行的文字断章取义，有一点伪元素中content='attr(data-content)'可以动态获取父级的属性内容说----这个效果并不是很好，这样会导致最后一行的文字和倒数第二行的文字断章取义，有一点伪元素中content='attr(data-content)'可以动态获取父级的属性内容说----这个效果并不是很好，这样会导致最后一行的文字和倒数第二行的文字断章取义，有一点伪元素中content='attr(data-content)'可以动态获取父级的属性内容说----">
        <p class="content">这个效果并不是很好，这样会导致最后一行的文字和倒数第二行的文字断章取义，有一点伪元素中content="attr(data-content)"可以动态获取父级的属性内容说----这个效果并不是很好，这样会导致最后一行的文字和倒数第二行的文字断章取义，有一点伪元素中content="attr(data-content)"可以动态获取父级的属性内容说----这个效果并不是很好，这样会导致最后一行的文字和倒数第二行的文字断章取义，有一点伪元素中content="attr(data-content)"可以动态获取父级的属性内容说----这个效果并不是很好，这样会导致最后一行的文字和倒数第二行的文字断章取义，有一点伪元素中content="attr(data-content)"可以动态获取父级的属性内容说----</p>
    </div>
    <script>
        window.onload = function () {
            // form表单
            var mysubmit = document.getElementById('submit');
            mysubmit.onclick = function (event) {
                if (true) {
                    event.preventDefault();
                    return false;
                } else {}
            }
            // form表单 end

            // qrCode
            var qrcode = new QRCode(document.getElementById("qrcode"), {
                width: 100,
                height: 100
            });

            function makeCode() {
                var elText = document.getElementById("text");

                if (!elText.value) {
                    alert("Input a text");
                    elText.focus();
                    return;
                }

                qrcode.makeCode(elText.value);
            }

            makeCode();

            $("#text").
            on("blur", function () {
                makeCode();
            }).
            on("keydown", function (e) {
                if (e.keyCode == 13) {
                    makeCode();
                }
            });
            // qrCode end

            // util 
            function format(num = 0) {
                num = parseFloat(num);
                if (isNaN(num)) {
                    num = 0;
                }
                let sReturn = num.toFixed(2).toString();

                if (num < 0) {
                    sReturn = sReturn.substring(1, sReturn.length);
                }
                if (sReturn.indexOf('.') > -1) {
                    let intNum = sReturn.split('.')[0];
                    let dobNum = sReturn.split('.')[1];
                    if (intNum.length >= 4) {
                        sReturn = handleNum(intNum) + '.' + dobNum;
                    }
                } else {
                    sReturn = handleNum(sReturn);
                }

                function handleNum(intNum) {
                    var mod = intNum.length % 3;
                    var output = mod == 0 ? '' : intNum.substring(0, mod);
                    for (var i = 0, len = Math.floor(intNum.length / 3); i < len; i++) {
                        if (mod == 0 && i == 0) {
                            output += intNum.substring(0, 3);
                        } else {
                            output +=
                                ',' + intNum.substring(mod + 3 * i, mod + 3 * i + 3);
                        }
                    }
                    return output;
                }

                if (num < 0) {
                    sReturn = '-' + sReturn;
                }
                return sReturn;
            }
            // console.log(format(-1000.1))
            // console.log(format(123231))
            // console.log(format(-0.2323))
            // console.log(format(1245745.2323))

            // 以下方法都不能处理小数

            // 方法一 （从后向前数三位加","注意当时第一位时不用加   无法处理小数情况）
            // function toThousands(num) {
            //     var result = [],
            //         counter = 0;
            //     num = (num || 0).toString().split('');
            //     for (var i = num.length - 1; i >= 0; i--) {
            //         counter++;
            //         result.unshift(num[i]);
            //         if (!(counter % 3) && i != 0) {
            //             result.unshift(',');
            //         }
            //     }
            //     return result.join('');
            // }

            // 方法二 (直接遍历字符串)
            // function toThousands(num) {
            //     var result = '',
            //         counter = 0;
            //     num = (num || 0).toString();
            //     for (var i = num.length - 1; i >= 0; i--) {
            //         counter++;
            //         result = num.charAt(i) + result;
            //         if (!(counter % 3) && i != 0) {
            //             result = ',' + result;
            //         }
            //     }
            //     return result;
            // }

            // 方法三 （正则的方式）
            // function toThousands(num) {
            //     var num = (num || 0).toString(),
            //         re = /\d{3}$/,
            //         result = '';
            //     while (re.test(num)) {
            //         result = RegExp.lastMatch + result;
            //         if (num !== RegExp.lastMatch) {
            //             result = ',' + result;
            //             num = RegExp.leftContext;
            //         } else {
            //             num = '';
            //             break;
            //         }
            //     }
            //     if (num) {
            //         result = num + result;
            //     }
            //     return result;
            // }

            // 方法四 （）
            // function toThousands(num) {
            //     var num = (num || 0).toString(),
            //         result = '';
            //     while (num.length > 3) {
            //         result = ',' + num.slice(-3) + result;
            //         num = num.slice(0, num.length - 3);
            //     }
            //     if (num) {
            //         result = num + result;
            //     }
            //     return result;
            // }

            // 方法五 （最简洁）
            // function toThousands(num) {
            //     return (num || 0).toString().replace(/(\d)(?=(?:\d{3})+$)/g, '$1,');
            // }

            // console.log(toThousands(1000))
            // console.log(toThousands(1000.3432))
            // console.log(toThousands(-1000.34))
            // console.log(toThousands(-100013))

            function unParams(sParams) {
                var asParams = (sParams || '').split('&'),
                    oParams = {},
                    asSplitedParam = [];

                for (var i = asParams.length - 1; i >= 0; i--) {
                    asSplitedParam = asParams[i].split('=');
                    oParams[asSplitedParam[0]] = asSplitedParam[1] || '';
                }

                return oParams;
            }

            console.log(unParams('http://localhost:8002/#/product/detail?type=1&borrowId=179393&classify=0'))

            function substitute(sContent, oData) {

                if (!oData) {
                    return sContent;
                }
                for (var p in oData) {
                    console.log(new RegExp('\\{' + p + '\\}', 'g'))
                    sContent = sContent.replace(
                        new RegExp('\\{' + p + '\\}', 'g'),
                        oData[p]
                    );
                }

                return sContent;
            }

            console.log(substitute('word={word},name{name}&title{title}', {
                name: 123,
                word: '你好',
                title: '标题'
            }))

            function getTouchPosition(e) {
                e = e.originalEvent || e;
                var event = e.originalEvent || e,
                    point =
                    e.touches && e.touches.length ?
                    e.touches[0] :
                    e.changedTouches && e.changedTouches.length ?
                    e.changedTouches[0] :
                    e,
                    oMove = {
                        x: point.pageX || 0,
                        y: point.pageY || 0,
                        pageX: point.pageX || 0,
                        pageY: point.pageY || 0,
                        touches: e.touches || [],
                        changedTouches: e.changedTouches
                    };
                return console.log(oMove);
            }
            document.getElementById('btn1').onclick = function (event) {
                getTouchPosition(event)
            }
            // util end
            // console.log(getTouchPosition())

            function guid() {
                return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
                    var r = Math.random() * 16 | 0,
                        v = c == 'x' ? r : (r & 0x3 | 0x8);
                    return v.toString(16);
                });
            }
            document.getElementById('btn2').onclick = function (event) {
                alert(guid())
            }

            // FileReader start
            function show(f) {
                var str = "";
                for (var i = 0; i < f.length; i++) {
                    var reader = new FileReader();
                    reader.readAsDataURL(f[i]);
                    reader.onload = function (e) {
                        str += "<img  height='50' width='50' id='img' src='" + e.target.result + "'/>";
                        $("#img")[0].outerHTML = str;
                    }
                }
            }
            // FileReader end
        }
    </script>
</body>

</html>